import React, { useEffect, useState } from 'react';
import './Member.scss'
import { Select, Input, Table, Button, Switch } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useNavigate } from 'react-router-dom'
import *as service from '../../../api/gl';

interface Props {

}

interface DataType {
    key: string;
    id: string,
    img: string,
    mingcheng: string,
    leixing: string,
    shuoming: string,
    time: string
}

function Member(props: Props) {

    const [list, setList] = useState<DataType[]>([])

    const navigate = useNavigate()

    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
    };

    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'i',
            key: 'i',
            align: 'center',
            width: 80,
            render: (_, record) => <a>{list.indexOf(record) + 1}</a>,
        },
        {
            title: '权益图标',
            dataIndex: 'img',
            key: 'img',
            align: 'center',
            width: 170,
            render: (_, record) => <div className='user'>{record.img}</div>,
        },
        {
            title: '权益名称',
            key: 'mingcheng',
            align: 'center',

            render: (_, record) => <div >{record.mingcheng}</div>,
        },
        {
            title: '权益类型',
            key: 'leixing',
            align: 'center',
            render: (_, record) => <div >{record.leixing}</div>,//动态渲染标签/组件
        },
        {
            title: '权益说明',
            key: 'shuoming',
            align: 'center',
            render: (_, record) => <div>{record.shuoming}</div>,//动态渲染标签/组件
        },
        {
            title: '权益状态',
            dataIndex: 'flag', //数据索引( 属性名 )
            key: 'flag',
            align: 'center',
            render: (text, record) => <Switch defaultChecked={text} />

        },
        {
            title: '最后修改时间',
            key: 'time',
            align: 'center',
            render: (_, record) => <div >{record.time}</div>,//动态渲染标签/组件
        },
        {
            title: '操作',
            key: 'tip',
            align: 'center',
            render: (_, record) => {
                return <div className="btn">
                    <Button>编辑</Button>
                    <Button>删除</Button>
                </div>
            },
        },
    ]

    //获取列表数据
    const list1 = async () => {
        const res = await service.member_list()
        setList(res.data)
    }
    useEffect(() => {
        list1()
    }, [])

    const tiao = () => {
        navigate('/index/memberadd')
    }
    




    return (
        <div className='member'>
            <div className='title-box'>
                <div className='title-top'>用户管理 / 会员权益</div>
                <div className='title-bottom'>会员权益</div>
            </div>
            <div className='label-search'>
                <div className='search-left'>
                    <div className='label-type'>
                        <span>权益类型</span>
                        <Select
                            style={{ width: 180 }}
                            onChange={handleChange}
                            placeholder={'请选择标签类型'}
                            options={[
                                { value: '全部', label: '全部' },
                                { value: '系统生成', label: '系统生成' },
                                { value: '自定义', label: '自定义' },
                            ]}
                        />
                    </div>
                    <div className='label-name'>
                        <span>权益名称</span>
                        <Input placeholder="请输入" style={{ width: 200 }} />
                    </div>
                </div>
                <div className='search-right'>
                    <button>查询</button>
                    <button>重置</button>
                </div>
            </div>
            <div className='label-list'>
                <div className='list_box'>
                    <div className='list-left'><div className="list-title">权益列表</div></div>
                    <div className='list-right'>
                        <button onClick={ tiao }>新建</button>
                        <button>全部删除</button>
                    </div>
                </div>
                <Table columns={columns} dataSource={list} style={{ marginTop: 20 }} rowKey="id" />

            </div>
        </div>
    );
}

export default Member;